import React, { memo } from "react";
import { useSelector, shallowEqual, useDispatch } from "react-redux";
import { Link } from "react-router-dom";
import { Image, Button } from "antd";
import { LoginWrapper } from "./style";

import { addNum } from "./store/action";

const Login = memo(() => {
  const dispatch: any = useDispatch();
  const { count } = useSelector(
    (state: any) => ({ count: state.login.count }),
    shallowEqual
  );
  return (
    <LoginWrapper>
      <h2>login</h2>
      <h3>持久化的数字:{count}</h3>
      <Button onClick={() => dispatch(addNum(10))}>+10</Button>
      <p></p>
      <Image.PreviewGroup>
        <Image
          width={200}
          src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
        />
      </Image.PreviewGroup>
      <p></p>
      <Button type="primary">
        <Link to={"/home"}>首页</Link>
      </Button>
    </LoginWrapper>
  );
});

export default Login;
